<template>
  <div class="order">
    <!-- 订单号 -->
    <div class="order-number">
      <a-button type="plain" @click="toList" class="d-a-center">返回</a-button>
      <a-tag color="#2a9d8f" style="padding: 5px; font-size: 15px; margin-left: 30px">订单编号:</a-tag>
      <text style="font-size: 20px">{{ order.number }}</text>
    </div>

    <!-- 订单和处理记录 -->
    <a-tabs v-model:activeKey="activeKey" @change="change">
      <a-tab-pane key="1" tab="订单">
        <div class="content">
          <a-row :gutter="0">
            <!-- 左侧用户信息和护士信息 -->
            <a-col :span="6" :lg="6" :sm="24" :xs="24">
              <a-col :span="24">
                <a-card title="用户信息" :bordered="true" :headStyle="headStyle" hoverable>
                  <a-list :bordered="false" :data-source="userData">
                    <template #renderItem="{ item }">
                      <a-list-item v-if="!item.type">
                        <h4 style="font-weight: bold">{{ item.title }}</h4>
                        <!-- {{ item }} -->
                        <a-tag :color="item.color">{{ item.value }} </a-tag>
                      </a-list-item>
                      <a-list-item v-else-if="item.type == 'button'">
                        <h4 style="font-weight: bold">{{ item.title }}</h4>
                        <!-- <a-tag :color="item.color">{{ item.value }} </a-tag> -->
                        <a-button type="link" size="small" @click="item.fun(item.object)" class="d-a-center">查看详情</a-button>
                      </a-list-item>
                    </template>
                  </a-list>
                  <!-- <a-row>
                    <a-col :span="12">
                      <h4>健康档案</h4>
                    </a-col>
                    <a-col :span="12"> </a-col>
                  </a-row> -->
                </a-card>
              </a-col>
              <a-col :span="24">
                <a-card title="护士信息" :bordered="true" :headStyle="headStyle" hoverable>
                  <template v-if="nurseData[0].value">
                    <a-list :bordered="false" :data-source="nurseData">
                      <template #renderItem="{ item }">
                        <a-list-item>
                          <h4>{{ item.title }}</h4>
                          <a-tag>{{ item.value }} </a-tag>
                        </a-list-item>
                      </template>
                    </a-list>
                  </template>
                  <a-empty v-else />
                </a-card>
              </a-col>
              <a-col :span="24">
                <a-card title="护工信息" :bordered="true" :headStyle="headStyle" hoverable>
                  <template v-if="careData[0].value">
                    <a-list :bordered="false" :data-source="careData">
                      <template #renderItem="{ item }">
                        <a-list-item>
                          <h4>{{ item.title }}</h4>
                          <a-tag>{{ item.value }} </a-tag>
                        </a-list-item>
                      </template>
                    </a-list>
                  </template>
                  <a-empty v-else />
                </a-card>
              </a-col>
              <a-col :span="24">
                <a-card title="邀请护士" :bordered="true" :headStyle="headStyle" hoverable>
                  <template v-if="nurseInvite[0].value">
                    <a-list :bordered="false" :data-source="nurseInvite">
                      <template #renderItem="{ item }">
                        <a-list-item>
                          <h4>{{ item.title }}</h4>
                          <a-tag>{{ item.value }} </a-tag>
                        </a-list-item>
                      </template>
                    </a-list>
                  </template>
                  <a-empty v-else />
                </a-card>
              </a-col>
            </a-col>
            <!-- 右侧信息详情、费用详情 -->
            <a-col :span="18" :xs="24" sm="24" :lg="18">
              <!-- 订单状态 -->
              <a-card :bordered="true" style="padding: 20px 0px" hoverable>
                <a-steps :current="orderStatus(order.status)">
                  <a-step title="待付款" />
                  <a-step title="待抢单" />
                  <a-step title="进行中" />
                  <a-step title="已完成" />
                </a-steps>
              </a-card>
              <!-- 有母订单、单独订单已接单展示的信息吗 v-if="status > 2" -->
              <a-card title="订单详情" :bordered="true" :headStyle="headStyle">
                <a-table
                  :columns="orderColums"
                  :data-source="orderList"
                  bordered
                  :loading="loading"
                  :pagination="pagination"
                  @change="handleTableChange"
                >
                  <template #price="{ record }">
                    <div>{{ priceFilterRole(record.price) }}</div>
                  </template>
                  <template #status="{ record }">
                    <a-button type="link" @click="look(record.key)">{{ orderListStatus(record.status) }}</a-button>
                  </template>
                  <template #operation="{ record, index }">
                    <a-button v-if="record.status == 2" type="link" @click="editTime(record.number, index)">填写服务时间</a-button>
                    <a-button v-else type="primary" @click="lookSonOrder(record.number, record.status)">查看详情</a-button>
                    <a-button
                      v-if="record.departTime && record.status <= 4 && order.departureStatus <= 2"
                      class="mt8"
                      @click="editStatus(record.number)"
                      >跳过定位</a-button
                    >
                  </template>
                </a-table>
                <img style="width: 100%" :src="departureStatus[order.departureStatus]" alt="" />
              </a-card>
              <!-- 母订单中有健康档案和护理报告 -->
              <a-card title="信息详情" :bordered="true" :headStyle="headStyle">
                <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-form-item label="订单核销码">
                    <div class="order-img" v-if="orderVerificationCode">
                      <a-image :width="100" :src="orderVerificationCode" style="height: 100px" />
                      <a-button type="primary" @click="downImage">下载</a-button>
                    </div>
                    <div v-else>无</div>
                  </a-form-item>

                  <a-form-item label="采血码">
                    <div class="order-img" v-if="order.collaboratorsMultiplayerInfo && order.collaboratorsMultiplayerInfo.length > 0">
                      <span v-for="(item, index) in order.collaboratorsMultiplayerInfo">{{
                        `${index + 1}、${item.patientName}(${item.bloodCollectionTubeCode})`
                      }}</span>
                    </div>
                    <div v-else>无</div>
                  </a-form-item>
                  <a-form-item label="数字核销码">
                    <div class="order-img" v-if="digitalVerificationCode">
                      <span>
                        {{ digitalVerificationCode }}
                      </span>
                    </div>
                    <div v-else>无</div>
                  </a-form-item>
                  <a-form-item label="医疗耗材图片">
                    <div class="order-img" v-if="order.consumablesPictures">
                      <a-image
                        :width="100"
                        v-for="item in order.consumablesPictures.split(',')"
                        :key="item"
                        :src="item"
                        style="height: 100px"
                      />
                    </div>
                    <div v-else>无</div>
                  </a-form-item>
                  <a-form-item label="医嘱">
                    <div class="order-img" v-if="order.medicalOrder">
                      <a-image :width="100" v-for="item in order.medicalOrder" :key="item" :src="item" style="height: 100px" />
                    </div>
                    <div v-else>无</div>
                  </a-form-item>
                  <a-form-item label="备注">
                    {{ order.otherInfo ? order.otherInfo : '无' }}
                    <span v-if="order.status == 2 && isEdit == 1" @click="storeVisible = true"><edit-outlined /></span>
                  </a-form-item>
                </a-form>
              </a-card>
              <!-- 耗材信息 -->
              <a-card title="耗材信息" v-if="huliList" :bordered="true" :headStyle="headStyle">
                <a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-if="huliList && huliList.name">
                  <h3 class="title">{{ huliList.name }} * {{ order.consumableBagSum || 0 }}</h3>
                  <a-form-item v-for="(item, i) in huliList.consumables" :key="i">
                    {{ item }}
                  </a-form-item>
                  <!-- <a-form-item label="picc护理包">
                    44444
                  </a-form-item> <a-form-item label="picc护理包">
                    44444
                  </a-form-item> -->
                </a-form>
                <div v-else>暂无耗材信息</div>
                <div class="tips">tips: 护士首次上门服务时，需准备所需全部耗材包提供患者！</div>
              </a-card>
              <a-card title="费用详情" :bordered="true" :headStyle="headStyle">
                <a-table :columns="fireColums" :data-source="fireList" :pagination="false" bordered> </a-table>
              </a-card>
              <!-- 编辑的时候才展示的----- -->
              <template v-if="isEdit == 1">
                <a-divider></a-divider>
                <!-- 待付款1：取消订单 -->
                <a-row v-if="status == 1">
                  <a-col :span="2" :offset="20">
                    <a-button type="primary" @click="cancleOrder" class="d-a-center">取消订单</a-button>
                  </a-col>
                </a-row>
                <!-- 待接单1:退款、分配护士 -->
                <a-row v-if="order.status == 2" :gutter="20">
                  <a-col :span="3" :offset="13">
                    <a-button type="danger" @click="refund" class="d-a-center">退款</a-button>
                  </a-col>
                  <a-col :span="3">
                    <a-button type="primary" @click="divideJigou" class="d-a-center">分配机构</a-button>
                  </a-col>
                  <a-col :span="3">
                    <a-button type="primary" @click="divideNurse" class="d-a-center">分配护士</a-button>
                  </a-col>
                </a-row>
                <!-- 进行中：退款、分配护士 -->
                <a-row v-if="order.status == 3 || order.status == 4" class="d-j-around">
                  <!-- <a-col :span="4" :offset="16" class="df"> -->
                  <!-- <a-button type="plain" @click="toList" class="d-a-center">返回</a-button> -->
                  <a-button type="danger" @click="ProcessRefund" class="d-a-center">退款</a-button>
                  <!-- </a-col> -->
                  <!-- <a-col :span="4">
                    <a-button type="primary" @click="divideNurse"
                      >重新分配</a-button
                    >
                  </a-col> -->
                </a-row>
              </template>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="处理记录">
        <!-- v-if="order.status > 2" -->
        <!-- <process-records :number="order.number"></process-records> -->
        <a-steps progress-dot :current="8" direction="vertical">
          <a-step v-for="(item, index) in orderLogs" :key="index" :title="item.title" :description="(item.name || '') + '  ' + item.time" />
          <!-- <a-step title="Finished" description="This is a description. This is a description." />
      <a-step title="In Progress" description="This is a description. This is a description." />
      <a-step title="Waiting" description="This is a description." />
      <a-step title="Waiting" description="This is a description." /> -->
        </a-steps>
      </a-tab-pane>
      <a-tab-pane key="3" tab="拨号记录">
        <a-table
          :columns="columnRadio"
          :data-source="tellList"
          bordered
          rowKey="key"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <!-- :row-selection="rowSelection" -->
          <template #callerType="{ record }">
            <div>
              {{ ['护士', '用户'][record.callerType] }}
            </div>
          </template>
          <template #titles="{ record }">
            主呼叫号码：{{ record.callerNumber }} <br />
            被叫号码：{{ record.calleeNumber }}
          </template>
          <template #callStatus="{ record }">
            <div>
              {{ ['未通话', '已通话'][record.callStatus] }}
            </div>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>

    <!-- 右边抽屉显示子订单详情 -->
    <template v-if="visible">
      <a-drawer :width="600" :title="'订单编号:' + sonOrder.number" placement="right" :visible="visible" @close="closeModal('visible')">
        <children-order :number="sonOrder.number" :status="sonOrder.status"></children-order>
      </a-drawer>
    </template>

    <!-- 健康档案 -->
    <template>
      <health v-if="healthVisible" :visible="healthVisible" @closeModal="closeModal('healthVisible')" :id="order.healthId"></health>
    </template>

    <!-- 编辑服务时间 -->
    <a-modal v-model:visible="timeVisible" title="编辑服务时间" :footer="null" destroyOnClose>
      <a-form @finish="onFinish" :model="form">
        <a-form-item label="服务时间" name="time" :rules="[{ required: true, trigger: 'change', message: '请选择服务时间!' }]">
          <a-date-picker
            v-model:value="time"
            format="YYYY-MM-DD HH:mm:ss"
            :disabled-date="disabledDate"
            :show-time="{ format: 'HH:mm:ss' }"
            @change="saveTime"
          />
        </a-form-item>
        <a-divider></a-divider>
        <a-row>
          <a-col :span="4" :offset="8">
            <a-button type="primary" html-type="submit" class="d-a-center">保存</a-button>
          </a-col>
          <a-col :span="4" :offset="1">
            <a-button type="info" @click="closeModal('timeVisible')" class="d-a-center">取消</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- 修改备注 -->
    <a-modal :visible="storeVisible" @ok="associateStore" @cancel="storeVisible = false" okText="确定">
      <a-form ref="storeFormRef" :rules="rules1">
        <a-form-item label="备注" name="consumableLists">
          <a-input v-model:value="otherInfo" placeholder=""></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 退款填写金额的弹窗 -->
    <!-- <a-modal v-model:visible="refundVisible" title="提示" @ok="handleOk">
      确定要退款此订单吗？
    </a-modal> -->

    <divide-nurse
      v-if="divideNurseVisible"
      :visible="divideNurseVisible"
      :number="order.number"
      @closeModal="closeModal('divideNurseVisible')"
      @success="divideSuccess"
    ></divide-nurse>
    <divide-jigou
      v-if="divideJigouVisible"
      :visible="divideJigouVisible"
      :number="order.number"
      @closeModal="closeModal('divideJigouVisible')"
      @success="divideSuccess"
    ></divide-jigou>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs, onMounted } from 'vue'
import { ExclamationCircleOutlined, EditOutlined } from '@ant-design/icons-vue'
import { Modal, message, notification } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'
import { useModal } from '@/hooks'
import health from '@/components/order/Health'
import ProcessRecords from '@/views/order/components/ProcessRecords'
import ChildrenOrder from '@/views/order/components/ChildrenOrder'
import { duration } from 'moment'
import divideNurse from '@/views/order/components/DivideNurse'
import divideJigou from '@/views/order/components/DivideJigou'
import { useStore } from 'vuex'
import {
  calleeRecordByNumber,
  selectOneOrder,
  selectAbnormalByNumber,
  cancelOrder,
  confirmRefund,
  adminCancelOrder,
  updateServiceTimeByNumber,
  updateOtherInfo,
  selectOrderLog,
  skipTargeting
} from '@/api/order/index.js'
import DivideNurse from '../components/DivideNurse.vue'
import { usePriceFilterRole } from '@/utils/filter'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const isEdit = route.query.isEdit //编辑还是查看
    const data = reactive({
      orderVerificationCode: '',
      digitalVerificationCode: '',
      tellList: [],
      current: 0,
      activeKey: '1', //订单 处理记录
      loading: true, //表格的加载
      healthVisible: false, //是否打开健康档案弹窗
      visible: ref(false), //是否展示抽屉
      refundVisible: ref(false),
      refundPrice: ref(''),
      isEditPrice: ref(false),
      order: {}, //订单详情
      medicalOrder: [], //医嘱
      orderList: [], //子订单列表
      timeVisible: false,
      form: {
        time: ''
      },
      time: [],
      // 子订单基本信息
      sonOrder: {
        number: '',
        index: '',
        status: ''
      },
      divideNurseVisible: false,
      divideJigouVisible: false,
      fireList: [],
      // 耗材信息
      huliList: null,
      storeVisible: false,
      otherInfo: '',
      orderLogs: ''
    })
    const departureStatus = {
      0: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/0e0e6d717b4c4649.png',
      1: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/8d40104e72d74711.png',
      2: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/b336d7bed3294aae.png',
      3: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/b336d7bed3294aae.png'
    }
    // 接收的参数
    const orderListStatus = status => {
      let title = ''
      switch (status) {
        case 1:
          title = '待付款'
          break
        case 2:
          title = '待抢单'
          break
        case 3:
          title = '待服务' //待服务
          break
        case 4:
          title = '服务中' //服务中
          break
        case 5:
          title = '已完成'
          break
        case 6:
          title = '已取消'
          break
        case 7:
          title = '已退款'
          break
        case 8:
          title = '异常单'
          break
        case 9:
          title = '退款中' //退款中
          break
        case 10:
          title = '已拒绝' //已拒绝
          break
        default:
          break
      }
      return title
    }

    //card标题样式
    const headStyle = computed(() => {
      return `background:#E6E6E6;font-weight:bolder`
    })
    const disabledDate = current => {
      // Can not select days before today and today
      return current && current < dayjs().endOf('day')
    }
    const disabledDateTime = () => {
      return {
        disabledHours: () => range(0, 24).splice(4, 20),
        disabledMinutes: () => range(30, 60),
        disabledSeconds: () => [55, 56]
      }
    }
    const priceFilterRole = usePriceFilterRole
    const refundVisible = ref(false)
    const refundPrice = ref('')
    const isEditPrice = ref(false)
    // 打开模态框
    const openModal = obj => {
      data[obj] = true
    }
    // 用户信息字段映射
    const USER_INFO_FIELDS = {
      name: { title: '下单人', value: '' },
      sex: { title: '性别', value: '' },
      userId: { title: 'ID', value: '' },
      serviceName: { title: '服务名称', value: '' },
      city: { title: '服务城市', value: '' },
      address: { title: '详细地址', value: '' },
      mobile: { title: '手机号', value: '', color: '#87d068' },
      scheduleTime: { title: '服务时间', value: '' },
      createdAt: { title: '下单时间', value: '' },
      num: { title: '服务次数', value: '' },
      payType: { title: '支付方式', value: '' },
      orderType: { title: '订单类型', value: '' },
      hospital: { title: '医院名称', value: '' },
      departmentInfo: { title: '科室信息', value: '' },
      kilometer: { title: '公里数', value: '' },
      carType: { title: '车辆类型', value: '' },
      healthArchive: {
        title: '健康档案',
        type: 'button',
        fun: openModal,
        object: 'healthVisible'
      }
    }
    //用户信息
    const userData = ref([])
    // computed(() => Object.values(USER_INFO_FIELDS))
    // 初始化用户信息
    const initUserData = object => {
      USER_INFO_FIELDS.name.value = object.name
      USER_INFO_FIELDS.sex.value = object.sex
      USER_INFO_FIELDS.userId.value = object.userId
      USER_INFO_FIELDS.serviceName.value = object.serviceName
      USER_INFO_FIELDS.city.value = `${object.economize || ''} ${object.addressCity || ''} ${object.distinguish || ''}`

      USER_INFO_FIELDS.address.value = object.address
      USER_INFO_FIELDS.mobile.value = object.mobile
      USER_INFO_FIELDS.scheduleTime.value = object.scheduleTime
      USER_INFO_FIELDS.createdAt.value = object.createdAt
      USER_INFO_FIELDS.num.value = object.num
      USER_INFO_FIELDS.payType.value = ['', '微信小程序', '微信', '支付宝'][object.payType || 1]

      if (object.createOrderJson) {
        const orderJson = JSON.parse(object.createOrderJson)
        USER_INFO_FIELDS.hospital.value = orderJson.hospital || ''
        USER_INFO_FIELDS.departmentInfo.value = orderJson.departmentInfo || ''
        USER_INFO_FIELDS.kilometer.value = orderJson.kilometer || ''
        USER_INFO_FIELDS.carType.value = orderJson.carType || ''
      }

      USER_INFO_FIELDS.orderType.value =
        object.orderType == 0 ? '普通订单' : object.orderType == 1 ? '权益订单' : object.orderType == 4 ? '护理订单' : ''

      userData.value = Object.values(USER_INFO_FIELDS)
    }
    //护士信息
    const nurseData = reactive([
      {
        title: '护士',
        value: ''
      },
      {
        title: '护士ID',
        value: ''
      },
      {
        title: '手机号',
        value: ''
      },
      {
        title: '接单时间',
        value: ''
      }
    ])
    //护工信息
    const careData = reactive([
      {
        title: '护工',
        value: ''
      },
      {
        title: '护工ID',
        value: ''
      },
      {
        title: '手机号',
        value: ''
      },
      {
        title: '接单时间',
        value: ''
      }
    ])
    const nurseInvite = reactive([
      {
        title: '护士',
        value: ''
      },
      {
        title: '护士ID',
        value: ''
      }
    ])

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
      total: 0
    })
    const columnRadio = [
      {
        title: '主动呼叫',
        dataIndex: 'callerType',
        className: 'table',
        slots: {
          customRender: 'callerType'
        }
      },
      {
        title: '呼叫号码',
        dataIndex: 'titles',
        className: 'table',
        slots: {
          customRender: 'titles'
        }
      },
      {
        title: '呼叫时间',
        dataIndex: 'callTime',
        className: 'table'
      },
      {
        title: '通话状态',
        dataIndex: 'callStatus',
        className: 'table',
        slots: {
          customRender: 'callStatus'
        }
      },
      {
        title: '通话时长（分）',
        dataIndex: 'callDuration',
        className: 'table'
      }
    ]
    const orderColums = [
      {
        title: '订单号',
        dataIndex: 'number',
        className: 'table',
        width: 150,
        fixed: 'left'
      },
      {
        title: '服务名称',
        dataIndex: 'serviceName',
        className: 'table',
        slots: {
          customRender: 'sort'
        }
      },

      {
        title: '金额',
        dataIndex: 'price',
        className: 'table',
        slots: {
          customRender: 'price'
        }
        // sorter: (a, b) => a.price - b.price,
      },
      {
        title: '订单状态',
        dataIndex: 'status',
        className: 'table',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '服务时间',
        dataIndex: 'scheduleTime',
        className: 'table',
        sorter: (a, b) => {
          const aTime = new Date(a.createdAt).getTime()
          const bTime = new Date(b.createdAt).getTime()
          return aTime - bTime
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        fixed: 'right',
        width: 100,
        slots: {
          customRender: 'operation'
        }
      }
    ]
    const fireColums = [
      {
        title: '服务费',
        dataIndex: 'servePrice'
      },
      {
        title: '耗材费',
        dataIndex: 'sellPrice'
      },
      {
        title: '夜间费',
        dataIndex: 'nightServicePrice'
      },
      {
        title: '优惠',
        dataIndex: 'reducePrice'
      },
      {
        title: '合计收益',
        dataIndex: 'sumPrice'
      },
      {
        title: '会员折扣',
        dataIndex: 'vipDiscount'
      },
      {
        title: '应结金额',
        dataIndex: 'calculatePrice'
      },
      {
        title: '退款金额',
        dataIndex: 'endPrice'
      }
    ]

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['5', '10', '15', '20'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // 分页器改变的时候
    const handleTableChange = async (pagination, filters, sorter) => {
      console.log(pagination, '当前分页')
      page.current = pagination.current
      page.pageSize = pagination.pageSize
      if (data.activeKey == 3) {
        let res = await calleeRecordByNumber({
          orderNumber: data.order.number,
          pageNum: page.current,
          pageSize: page.pageSize
        })
        if (res.success) {
          data.tellList = res.object.list
          page.total = res.object.total
        }
      }
      if (data.activeKey == 1) {
        init()
      }
      // 请求列表接口
    }

    // 关闭模态框
    const closeModal = obj => {
      data[obj] = false
    }

    const lookSonOrder = (e, status) => {
      data.visible = true
      data.sonOrder.number = e
      data.sonOrder.status = status
    }

    const downImage = () => {
      let link = document.createElement('a')
      //创建一个a标签
      link.style.display = 'none'
      //将a标签隐藏
      link.href = data.orderVerificationCode
      //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
      link.setAttribute('download', '订单')
      // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
      document.body.appendChild(link)
      //将上面创建的a标签加入到body的尾部
      link.click()
    }
    // 编辑是否开始服务
    const editStatus = number => {
      const { closeModal } = useModal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '操作完成后护士此订单将不在受位置信息约束？',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          let res = await skipTargeting({ number })
          if (res.success) {
            message.success('操作成功~')
            init()
          }
          closeModal()
        }
      })
    }
    // 编辑服务时间
    const editTime = (e, index) => {
      data.timeVisible = true
      data.sonOrder.number = e
      data.sonOrder.index = index
    }
    const onFinish = async values => {
      let res = await updateServiceTimeByNumber(data.sonOrder.number, values.time)
      if (res.success) {
        notification.success({
          message: '修改成功~',
          duration: 2
        })
        data.timeVisible = false
        data.orderList[data.sonOrder.index].status = 3
      } else {
        notification.error({
          message: '编辑服务时间失败~',
          duration: 2
        })
        data.timeVisible = false
      }
    }
    const saveTime = (e, str) => {
      data.form.time = str
    }
    const change = async e => {
      page.total = 0
      console.log(e, '点击面板')
      if (e == 2) {
        let res = await selectOrderLog({
          number: data.order.number
        })
        if (res.success) {
          data.orderLogs = res.object
        }
      } else if (e == 3) {
        let res = await calleeRecordByNumber({
          orderNumber: data.order.number,
          pageNum: page.current,
          pageSize: page.pageSize
        })
        if (res.success) {
          data.tellList = res.object.list
          page.total = res.object.total
        }
      }
    }
    const toList = () => {
      console.log('router', router)

      router.back()
    }
    // 取消订单
    const cancleOrder = () => {
      const { closeModal } = useModal.confirm({
        title: '确定取消改订单吗?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '取消订单后不可恢复，请谨慎操作'
      })
    }
    // 退款
    const refund = () => {
      const { closeModal } = useModal.confirm({
        title: '确定退款此订单吗?',
        icon: createVNode(ExclamationCircleOutlined),
        // content: "可退款金额为:9999元",
        async onOk() {
          let res = await cancelOrder(data.order.number)
          if (res.success) {
            notification.success({
              message: '退款成功'
            })
            closeModal()
            setTimeout(() => {
              router.go(-1)
            }, 300)
          }
        }
      })
    }
    const editRefundPrice = () => {
      isEditPrice.value = !isEditPrice.value
    }
    // 进行中的退款
    const ProcessRefund = () => {
      let obj = {
        number: Number.parseInt(data.order.number)
      }
      const { closeModal } = useModal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定要退款此订单吗？',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          let res = await adminCancelOrder(obj)
          if (res.success) {
            closeModal()
            message.success('退款成功~')
            router.go(-1)
          }
        }
      })
    }

    // 分配护士
    const divideNurse = () => {
      data.divideNurseVisible = true
    }
    const divideJigou = () => {
      data.divideJigouVisible = true
    }
    // 分配成功了
    const divideSuccess = () => {
      data.order.status = 3 //进行中
      init()
    }
    init()
    const associateStore = async () => {
      if (data.otherInfo.length == 0) {
        message.error('请输入备注')
        return
      }
      let res = await updateOtherInfo({
        number: data.order.number,
        otherInfo: data.otherInfo
      })
      if (res.success) {
        data.storeVisible = false
        message.success('操作成功')
        init()
      }
    }
    // 订单状态
    const orderStatus = status => {
      let current = 0
      switch (status) {
        case 1:
          current = 0
          break
        case 2:
          current = 1
          break
        case 3:
          current = 2
          break
        case 4:
          current = 2
          break
        case 5:
          current = 3
          break
        case 9:
          current = 2 //退款中
        case 10:
          current = 2 //已拒绝
          break
          break
        default:
          break
      }
      return current
    }

    async function init() {
      let res = await selectOneOrder(route.query.number)
      if (res.success) {
        let object = res.object.object
        data.order = object
        console.log(data.order, 5656565656)
        initUserData(object)
        if (object.identity == 1) {
          nurseData[0].value = object.nurseName
          nurseData[1].value = object.nurseId
          nurseData[2].value = object.nurseMobile
        } else {
          careData[0].value = object.nurseName
          careData[1].value = object.nurseId
          careData[2].value = object.nurseMobile
        }

        nurseInvite[0].value = object.shareNurseName
        nurseInvite[1].value = object.shareNurseId

        if (object.consumablePrice > 0) {
          data.huliList = res.data
        }
        let discount = Math.floor(object.vipDiscount * 100) + '%'
        // 信息过滤 非超级管理员 技术部 护理部 财务部 不可查看应结金额
        const calculatePrice = usePriceFilterRole(object.calculatePrice)
        data.fireList = [
          {
            key: 1,
            servePrice: Number(object.servePrice),
            sellPrice: object.consumablePrice,
            reducePrice: object.reducePrice || 0,
            sumPrice: object.sumPrice,
            calculatePrice: calculatePrice,
            endPrice: object.endPrice || '',
            vipDiscount: discount || '',
            nightServicePrice: object.nightServicePrice
          }
        ]
        if (!object.calculatePrice) {
          // fireColums.pop()
          fireColums.splice(-2, 1)
        }
        if (!object.endPrice) {
          fireColums.pop()
        }
        // 长期订单
        data.order.sonOrders.map(el => {
          el.key = el.number
          if (el.digitalVerificationCode) {
            data.digitalVerificationCode = el.digitalVerificationCode
          }
          if (el.orderVerificationCode) {
            data.orderVerificationCode = el.orderVerificationCode
          }
        })
        console.log(data.order.sonOrders)
        data.orderList = data.order.sonOrders
        // data.orderList.vipDiscount = data.order.vipDiscount;
        data.loading = false
      }
      console.log(data.orderList, '订单详情是')
    }
    // init初始化数据放在这里没反应就是
    onMounted(() => {})
    return {
      toList,
      ...toRefs(data),
      priceFilterRole,
      userData,
      careData,
      nurseData,
      nurseInvite,
      headStyle,
      orderColums,
      columnRadio,
      fireColums,
      pagination,
      labelCol: {
        style: {
          width: '100px',
          fontWeight: 'bolder'
        }
      },
      wrapperCol: {
        span: 20,
        offset: 1
      },
      handleTableChange,
      editTime,
      closeModal,
      cancleOrder,
      divideNurse,
      divideJigou,
      refund,
      ProcessRefund,
      refundPrice,
      isEditPrice,
      editRefundPrice,
      isEdit,
      change,
      orderListStatus,
      disabledDateTime,
      disabledDate,
      saveTime,
      onFinish,
      openModal,
      lookSonOrder,
      editStatus,
      orderStatus,
      divideSuccess,
      associateStore,
      departureStatus,
      downImage
    }
  },

  components: {
    health,
    ProcessRecords,
    ChildrenOrder,
    EditOutlined,
    divideNurse,
    divideJigou
  },
  DivideNurse
}
</script>

<style scoped lang="less">
.order-number {
  font-size: 24px;
  display: flex;
  align-items: center;
}
</style>
